<template>
	<view class="manual">
		<view class="status_bar"></view>
		<view class="title">手动控制</view>
		<view class="uni-flex uni-row content">
			<view class="irri">
				<template v-for="irri in getirris">
					<irri-area :valves="irri.valves" :id="irri.id" :name="irri.name" @change-switch-state = "changeSwitchState"></irri-area>
				</template>
			</view>
			<uni-load-more class="loading" :iconSize="32" color="#299384" :status="loading.status" :contentText="loading.contentText"></uni-load-more>
		</view>
	</view>
</template>

<script>
	import xph from '@/common/xph.js'
	import {mapState, mapActions} from 'vuex';
	import irriArea from './components/irri-area.vue'
	export default {
		data() {
			return {
				loading:{
					status: 'noMore',
					contentText: 	{contentdown: "上拉显示更多灌区",contentrefresh: "正在加载，请稍等...",contentnomore: "没有更多灌区了"}
				},
				irris:[
					{
					id: 1,
					name: '八号工坊灌区',
					valves:[{
						name: '01号阀门',
						switch: true,
						power: 10,
						signal: 31,
						state: ''
					},{
						name: '02号阀门',
						switch: false,
						power: 70,
						signal: 31,
						state: ''
					},{
						name: '03号阀门',
						switch: false,
						power: 60,
						signal: 31,
						state: ''
					}]
				}
				]
			};
		},
		methods:{
			changeSwitchState(valve, id){
				xph.controlDeviceValve(valve.facId, valve.num, !valve.switch).then(res => {
					if(res){
						let device = this.devices.find(dev => dev.id === valve.facId)
						let relay = device.valves.find(val => val.num === valve.num)
						
						this.setDeviceRelay({
							valve: relay,
							state: !valve.switch
						})
					} else {
						uni.showToast({
							title: '设备不在线',
							icon: 'error'
						})
					}
				}).catch(err => {
					uni.showToast({
						title:"网络异常",
						icon: 'error'
					})
				})
			},
			...mapActions('irrigation', ['setIrrigationInfo']),
			...mapActions('device', ['setDeviceRelay'])
		},
		components:{
			irriArea
		},
		computed:{
			...mapState(['user']),
			...mapState('device', ['devices']),
			...mapState('irrigation', ['irrigations', 'groups']),
			getirris(){
				let irs = this.irrigations.map(irri => {
					let valves = [];
					irri.groups.map(group => {
						if(group.rotationRelays){
							group.rotationRelays.map( relay => {
								let device = this.devices.find(dev => dev.id == relay.facId)
								if(!!device){
									let valve = device.valves.find(val => val.num === relay.relay)
									if(!!valve){
										valves.push( {
											facId: device.id,
											num: valve.num,
											name: valve.name,
											switch: valve.state,
											power: 100,
											signal: 31,
											state: ''
										} )
									}
								}
							})
						}
					})
					return {
						id: irri.id,
						name: irri.name,
						valves: valves
					}
				})
				return irs
			}
		},
		onShow() {
		},
		onPullDownRefresh(){
			this.setIrrigationInfo(this.user)
			setTimeout(uni.stopPullDownRefresh, 2000)
		},
		onReachBottom(){
			console.log('页面上拉')
		}
	}
</script>

<style lang="scss" scoped>
.manual{
		min-height: 100%;
	.title{
		margin-left: 28.13rpx;
		width: 280.18rpx;
		height: 51.58rpx;
		border: 1px solid #299384;
		border-left-width: 0;
		border-right-width: 0;
		border-radius: 11.72rpx;
		
		text-align: center;
		font-size: 33.99rpx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #299384;
		line-height: 51.58rpx;
	}
	.content{
		/* #ifndef H5 */
		min-height: calc(100vh - 100rpx);
		/* #endif */
		/* #ifdef H5 */
		min-height: calc(100vh - 150rpx);
		/* #endif */
		margin-top: 37.51rpx;
		justify-content: center;
		flex-wrap: wrap;
		.irri{
			width: 100%;
			>uni-view {
				margin-bottom: 43.37rpx;
			}
		}
		.loading{
			align-self: flex-end;
		}
	}
}
</style>
